import 'package:flutter/material.dart';
import 'package:get/get.dart';
import '../controllers/recharge_controller.dart';

class RechargePage extends StatelessWidget {
  RechargePage({super.key});

  final RechargeController controller = Get.find<RechargeController>();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("充值中心"),
      ),
      body: SizedBox(
        width: double.infinity,
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.center,
          children: [
            SizedBox(height: 30),
            Image.asset(
              "assets/images/icon_bean.webp",
              width: 60,
              fit: BoxFit.cover,
            ),
            SizedBox(height: 10),
            Text(
              "100",
              style: TextStyle(fontSize: 18, fontWeight: FontWeight.bold),
            ),
            SizedBox(height: 30),
            GridView.builder(
              shrinkWrap: true,
              padding: EdgeInsets.symmetric(horizontal: 10),
              physics: NeverScrollableScrollPhysics(),
              gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
                crossAxisCount: 3,
                crossAxisSpacing: 10,
                mainAxisSpacing: 10,
                childAspectRatio: (Get.width / 3) / 100,
              ),
              itemCount: controller.purchaseList.length,
              itemBuilder: (context, index) {
                return GestureDetector(
                  onTap: () {
                    controller.selectedIndex.value = index;
                    controller.rechargeNum.value = "${controller.purchaseList[index].toStringAsFixed(2)} 元";
                  },
                  child: Obx(() {
                    bool isSelected = controller.selectedIndex.value == index;
                    return Container(
                      decoration: BoxDecoration(color: isSelected ? Color(0xFFF0EBDE) : Colors.grey[200], borderRadius: BorderRadius.circular(15), border: Border.all(color: isSelected ? Color(0xFFE4924F) : Colors.transparent, width: 2)),
                      child: Column(
                        mainAxisAlignment: MainAxisAlignment.center,
                        children: [
                          RichText(
                            text: TextSpan(
                              text: '${controller.purchaseList[index] * 10} ',
                              style: TextStyle(
                                color: isSelected ? Color(0xFF4E1E0D) : Colors.black,
                                fontFamily: 'Sansita',
                                fontSize: 22,
                                fontWeight: FontWeight.bold,
                              ),
                              children: [
                                TextSpan(
                                  text: '豆子',
                                  style: TextStyle(
                                    color: isSelected ? Color(0xFF4E1E0D) : Colors.black,
                                    fontSize: 12,
                                  ),
                                ),
                              ],
                            ),
                          ),
                          Text(
                            '${controller.purchaseList[index].toStringAsFixed(2)} 元',
                            style: TextStyle(
                              color: isSelected ? Color(0xFFBC9D83) : Colors.grey,
                            ),
                          ),
                        ],
                      ),
                    );
                  }),
                );
              },
            ),
            Spacer(),
            Container(
              width: double.infinity,
              margin: EdgeInsets.only(left: 10, right: 10, bottom: 10),
              padding: EdgeInsets.symmetric(vertical: 10),
              decoration: BoxDecoration(
                gradient: LinearGradient(
                  colors: [Color(0xFFFED776), Color(0xFFE9A062)],
                  begin: Alignment.centerLeft,
                  end: Alignment.centerRight,
                ),
                borderRadius: BorderRadius.circular(8),
              ),
              child: Center(
                child: Obx(() {
                  return Text(
                    "立即充值 ${controller.rechargeNum.value}",
                    style: TextStyle(fontSize: 16, fontWeight: FontWeight.w600),
                  );
                }),
              ),
            ),
            RichText(
              text: TextSpan(
                text: '点击支付即代表同意',
                style: TextStyle(
                  color: Colors.grey,
                  fontSize: 13,
                ),
                children: [
                  TextSpan(
                    text: '《充值服务协议》',
                    style: TextStyle(
                      color: Color(0xFFE9A062),
                      fontSize: 13,
                    ),
                  ),
                ],
              ),
            ),
            SizedBox(
              height: 30,
            ),
          ],
        ),
      ),
    );
  }
}
